﻿<!DOCTYPE html>
<!--风险类别管理列表-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>

    <style>
        .rel {
            position: absolute;
        }

        .Leve1 {
            background-color: rgba(255, 0, 2, 0.7);
        }

        .Leve1 span {
            color: #fff !important
        }

        .Leve2 {
            background-color: rgba(255, 95, 0, 0.7);
        }

        .Leve2 span {
            color: #700109 !important
        }

        .Leve3 {
            background-color: rgba(255, 239, 0, 0.7);
        }

        .Leve3 span {
            color: #444500 !important
        }

        .Leve4 {
            background-color: rgba(0, 121, 255, 0.7);
        }

        .Leve4 span {
            color: #011787 !important
        }

        .logo {
            height: 17px;
            width: 16px
        }

        .logo2 {
            height: 12px;
            width: 12px
        }

        .logo3 {
            height: 13px;
            width: 13px
        }

        .floatDiv {
            position: fixed;
            bottom: 20px;
            right: 15px;
            z-index: 888;
            width: 80px;
        }

        .el-dialog__body {
            height: 100% !important;
        }

        .el-dialog.is-fullscreen {
            overflow: hidden !important;
        }
    </style>
</head>

<body>
    <div id="main">
        <el-row>
            <el-col class="head-tool">
                <span>
                    <btn :text="col.LookInfo" imgsrc="/static/images/general.png" linetype="4" @click="UserInput"></btn>
                </span>
            </el-col>
        </el-row>
        <div class="floatDiv">
            <div>
                <img src="nred.png" class="logo2" /> &nbsp;&nbsp;一级
            </div>
            <div>
                <img src="norange.png" class="logo2" /> &nbsp;&nbsp;二级
            </div>
            <div>
                <img src="nyellow.png" class="logo2" /> &nbsp;&nbsp;三级
            </div>

            <div>
                <img src="nblue.png" class="logo2" /> &nbsp;&nbsp;四级
            </div>


            <p></p>

            <div>
                <img src="隐患.png" class="logo3" /> &nbsp;&nbsp;隐患
            </div>
            <div>
                <img src="作业.png" class="logo3" /> &nbsp;&nbsp;作业
            </div>
            <div>
                <img src="MES.png" class="logo3" /> &nbsp;&nbsp;MES
            </div>
            <div>
                <img src="设备.png" class="logo3" /> &nbsp;&nbsp;设备
            </div>
            <div>
                <img src="nDun.png" class="logo3" /> &nbsp;&nbsp;综合
            </div>
        </div>
        <el-slider v-model="z" :min="0.1" :max="2" :step="0.01"></el-slider>
        <div
            :style="'position:relative;width:' + z*719 + 'px; height: ' + z*752  + 'px; border: 1px solid black;background-image: url(SanDongShengAoMap.png); background-repeat:no-repeat; background-size:100% 100%;'">
            <div v-for="item in ListItem.tableData"
                :style="'width:' + z*item.w + 'px; height:' + z*item.h + 'px; left:' + z*item.l + 'px; top:' + z*item.t + 'px;'"
                :class="'rel Leve' +item.Level" v-on:click="areaClick(item)">
                <span style="color:brown">{{item.name}}</span>
            </div>
            <div v-for="item in ListItem.tableData">
                <div v-for="(data,i) in item.jb" :style="'width:16px; height:16px; left:' +  (Math.floor(Math.random()*(z*item.w-16))+16 + z*item.l -16) +
           'px; top:' + (z*item.t +  Math.floor(Math.random()*(z*item.h-16))+16-16)+ 'px;'" :class="'rel  Leve5'">

                    <img v-if="data=='隐患信息'" src="隐患.png" class="logo" />
                    <img v-if="data=='特殊作业'" src="作业.png" class="logo" />
                    <img v-if="data=='MES1级警报'" src="MES.png" class="logo" />
                    <img v-if="data=='设备1级警报'" src="设备.png" class="logo" />
                </div>

            </div>
        </div>




        <el-dialog :title="selectAreaItem.name" width="80%" :visible="dialogeVisible" :before-close="dialogHandleClose">
            <el-row>
                <el-radio-group v-model="dialogData.formInline.model.area" @change="dialogQuerychange">
                    <el-radio-button label="-1">全部</el-radio-button>
                    <el-radio-button v-for="item in dialogData.pageData.areaList" :label="item.key">
                        {{item.value}}
                    </el-radio-button>
                </el-radio-group>
            </el-row>
            <HR>
            <el-row>
                <el-checkbox-group v-model="dialogData.formInline.model.RiskRootInType" @change="dialogQuerychange">
                    <el-checkbox v-for="item in RiskRootInList" :label="item.key" :key="item.key">{{item.value}}
                    </el-checkbox>
                </el-checkbox-group>
            </el-row>
            <HR>
            <el-table border :height="ListItem.tableHeight" :data="dialogData.pageData.pageModel.pageData">
                <el-table-column prop="RiskRootIn" :label="Map.RiskRootIn">
                </el-table-column>
                <el-table-column prop="Area" :label="Map.Area">
                </el-table-column>
                <el-table-column prop="RiskLeve" :label="Map.RiskLeve">
                </el-table-column>
                <el-table-column prop="date" :label="Map.date">
                </el-table-column>
                <el-table-column prop="Descriptio" :label="Map.Descriptio">
                </el-table-column>
            </el-table>
            <el-pagination ref="page" @size-change="dialogHandleSizeChange" @current-change="dialogHandleCurrentChange"
                :current-page="dialogData.formInline.currentPage" :page-sizes="ListItem.pagesizes"
                :page-size="ListItem.pagesize" :layout="ListItem.layout"
                :total="dialogData.pageData.pageModel.rowCount">
            </el-pagination>
        </el-dialog>
        <el-dialog title="运行情况综合信息板" :visible.sync="ListItem.dialogVisible" @close='closeDialog' width="80%"
            height="80%" top="10vh" fullscreen="true">
            <iframe ref="iframe" :src="ListItem.InputUrl" style="height:95%;width:100%" frameborder="0"></iframe>
        </el-dialog>
    </div>
</body>

</html>
<script>
    var app = new Vue({
        el: '#main',

        data: {
            ListItem: ListItem,
            formInline: {
                model: {},
                offset: 0,
                limit: 100
            },
            RiskRootInList: [],
            timer: null,
            dialogeVisible: false,//Dialog显示
            selectAreaItem: {},//已选择区域
            //Dialog数据
            dialogData: {
                formInline: {
                    model: {
                        area: -1,//已选
                        RiskRootInType: [],//已选隐患源
                    },
                    offset: 0,
                    limit: 5
                },
                pageData: {
                    areaList: [],
                    pageModel: {
                        pageData: [],
                        rowCount: 0
                    }
                },
            },

            z: 1,//Map显示比例
        },
        mounted: function () {
            tablehigh(this);
            //获取页面基础信息
            this.GetBaseData();
            //首次查询
            this.GetPageData(1);
            //定时查询
            this.timer = setInterval(this.GetPageData, 10000, 1);
        },
        methods: {
            //Dialog展示
            UserInput: function (val, id) {
                DialogShow(this, val, "OperationBoardChart.html", id);
            },
            //关闭Dialog 回调
            closeDialog: function () { closeDialog(this); },
            GetPageData: function (currentIndex) { GetPageData(this, currentIndex, '/api/Map/GetList/sanDongShengAoMap') },
            GetBaseData: function () {
                this.RiskRootInList = getDicData('96');
                for (var i = 0; i < this.RiskRootInList.length; i++) {
                    this.dialogData.formInline.model.RiskRootInType.push(this.RiskRootInList[i].key);
                }
            },
            //点击A
            areaClick: function (item) {
                this.selectAreaItem = item;
                this.GetAreaBaseData();
                this.dialogGetPageData();
                this.dialogeVisible = true;
            },
            GetAreaBaseData: function () {
                //获取该区域下小区域信息
                myAjax("post", app, '/api/Map/GetAreaBaseData', null, function (response) {
                    app.dialogData.pageData.areaList = response.data;
                });
            },
            // Dialog里面 查询当前选择区域风险信息
            dialogGetPageData: function (currentIndex) {
                this.dialogData.formInline.offset = (currentIndex - 1) * ListItem.pagesize;
                this.dialogData.formInline.limit = ListItem.pagesize;
                myAjax("post", app, '/api/Map/GetAreaData', this.dialogData.formInline, function (response) {
                    app.dialogData.pageData.pageModel = response.data;
                });
            },
            dialogHandleSizeChange: function (val) {
                this.ListItem.pagesize = val;
                this.dialogGetPageData(1);
            },
            //跳页触发方法
            dialogHandleCurrentChange: function (val) {
                this.dialogGetPageData(val);
            },
            dialogHandleClose: function (done) {

                this.dialogeVisible = false;
            },
            //查询条件更改时调用
            dialogQuerychange: function () {
                console.log(this.dialogData.formInline.model.area);
                this.dialogGetPageData(1);
            },

        },

        beforeDestroy: function () {
            //销毁定时器
            clearInterval(this.timer);
        }
    })

</script>